<template>
    <div class="main_Box">
        <div class="top_tab">
            <div @click="goBack" class="top_flex_back">
                <img src="../../../assets/image/zxl/fanhui.png" style="width: 8px;height: 12px;margin-right: 4px;">
                <span>返回</span>
            </div>
            <div>
                <el-pagination ref="paginationRef" layout="prev, jumper, next" :page-size="1" :total="totalPages"
                    v-model:current-page="currentPage" @current-change="handleCurrentChange" />
            </div>
            <div class="top_entry" @click="lookOld">
                <button v-if="contractInfo.cancelContractId">查看原合同</button>
            </div>
        </div>
        <div class="bottom_tab">
            <div class="left_box">
                <div class="left_area">
                    <div class="area_file">
                        <img class="area_img" :src="rightFileImg">
                    </div>
                </div>
            </div>
            <div class="middle_box">
                <div ref="pageWrapperRef" @scroll="handleScroll" class="scroll-container">
                    <div v-if="totalPagesImg.length != 0" class="page-container" ref="pageRefs"
                        v-for="page in totalPages" :key="page">
                        <!-- 每页的文档图片（模拟多页） -->
                        <img :src="totalPagesImg[page - 1].filePath" alt="第{{ page }}页文档" class="document-img">
                    </div>
                </div>
            </div>
            <div class="right_box">
                <img src="../../../assets/image/zxl/jieyue.png" class="right_icon" v-if="contractInfo.status == 8">
                <div class="right_item">
                    <div class="right_name">任务主题</div>
                    <div class="right_value1">{{ contractInfo.task_name }}</div>
                </div>
                <div class="right_item">
                    <div class="right_name">合同编号</div>
                    <div class="right_value1">{{ contractInfo.file ? contractInfo.file.ContractNo : '' }}</div>
                </div>
                <div class="right_item">
                    <div class="right_name">发起方</div>
                    <div class="right_value1">{{ contractInfo.start_user_name }}</div>
                </div>
                <div class="right_item">
                    <div class="right_name">发起时间</div>
                    <div class="right_value1">{{ contractInfo.CreateTime }}</div>
                </div>
                <div class="right_item">
                    <div class="right_name">截止时间</div>
                    <div class="right_value1">{{ contractInfo.closing_date }}</div>
                </div>
                <div class="right_item">
                    <div class="right_name">签署详情</div>
                    <div class="right_value2">
                        <div class="right_value2_item" v-for="(item, index) in contractInfo.allJoins">
                            <span>{{ item.join_name }}</span>：<span>{{ item.join_phone }}</span>
                        </div>
                    </div>
                </div>
                <div class="right_item">
                    <div class="right_name">签署进度</div>
                    <div class="right_value3">
                        <el-steps direction="vertical">
                            <el-step v-for="(item, index) in contractInfo.contract" :title="item.create_time"
                                :description="item.content">
                                <template #icon>
                                    <img src="../../../assets/image/zxl/progress_icon.png"
                                        style="width: 12px;height: 12px;">
                                </template>
                            </el-step>
                        </el-steps>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount, watch, nextTick } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { getSignContractDetail } from "@/api/xl";

const router = useRouter();
const route = useRoute();

onMounted(async () => {
    await nextTick(); // 等待DOM渲染完成

    getContractInfo()

});

const getContractInfo = () => {
    getSignContractDetail({
        task_id: props.contract_id,
        user_id: props.user_id,
    }).then(res => {
        console.log(res)
        //设置页码
        contractInfo.value = res.data;
        totalPages.value = res.data.file.imgCount;
        totalPagesImg.value = res.data.file.images;
        rightFileImg.value = res.data.file.images[0].filePath;
        const classifier = paginationRef.value.$el.querySelector('.el-pagination__classifier')
        if (classifier) {
            classifier.textContent = '/ ' + totalPages.value  // 改为你需要的文字
        }
        setTimeout(() => {
            if (pageRefs.value.length) {
                // 获取单页高度（用于计算页码和位置）
                pageHeight.value = pageRefs.value[0].offsetHeight;
            }
        }, 1000)
    });
}

const props = defineProps({
    contract_id: {
        type: String,
        default: '' // 对象/数组默认值需返回函数
    },
    user_id: {
        type: Number,
        default: 0 // 对象/数组默认值需返回函数
    },
})

watch(
  () => props.contract_id, // 只监听 id
  (newId, oldId) => {
    if (newId !== oldId) { // 避免重复触发（如参数未实际变化）
      console.log('id 变化：', oldId, '→', newId)
      // 执行核心逻辑：重新加载该 id 对应的数据
      getContractInfo()
    }
  },
  { immediate: true } // 初始化时执行一次（加载初始 id 的数据）
)

const paginationRef = ref(null);
const pageWrapperRef = ref(null);// 滚动容器
const pageHeight = ref(0); // 单页高度
const pageRefs = ref([]);//所有页的DOM引用
const totalPages = ref(1);// 总页数
const totalPagesImg = ref([]);//
const currentPage = ref(1); // 当前显示的页码
const targetPage = ref(1); // 页码输入框绑定的值
const rightFileImg = ref(''); // 
const contractInfo = ref({}); // 

const rightArr = ref({
    theme: '租房合同',
    contract_no: '20251009083532686',
    initiator: '耀朔科技(上海)有限公司',
    initiator_time: '2025-10-08 20:19',
    deadline: '2025-10-10 04:55',
    sign_details: [{
        name: '周志伟',
        mobile: '18989568785'
    }, {
        name: '耀朔科技(上海)有限公司',
        mobile: '18898789858'
    }],
    sign_progress: [{
        time: '2025-10-10 04:55',
        content: '由耀朔科技(上海)有限公司已拒签'
    }, {
        time: '2025-10-08 04:55',
        content: '由耀朔科技(上海)有限公司已拒签'
    }, {
        time: '2025-10-05 04:55',
        content: '由耀朔科技(上海)有限公司已拒签'
    }]
});

const goBack = () => {
    //router.push({ name: 'employeeList' });
    router.back()
}

const lookOld = () => {
    router.push({ name: "SigningCenterDetail", params: { id: contractInfo.value.cancelContractId, type: 3, userId: props.user_id, usertype: 1 } });
}

const handleScroll = () => {
    if (!pageWrapperRef.value || !pageHeight.value) return;

    const scrollTop = pageWrapperRef.value.scrollTop;
    // 计算当前页：滚动距离 / 单页高度 → 向下取整 + 1
    currentPage.value = Math.floor(scrollTop / pageHeight.value) + 1;
    currentPage.value = Math.max(1, Math.min(currentPage.value, totalPages.value));
    targetPage.value = currentPage.value;
}

const handleCurrentChange = (page) => {
    const validPage = Math.max(1, Math.min(page, totalPages.value));
    targetPage.value = validPage;
    currentPage.value = validPage;
    if (pageWrapperRef.value && pageHeight.value) {
        pageWrapperRef.value.scrollTo({
            top: (validPage - 1) * pageHeight.value,
            behavior: 'smooth'
        });
    }
}

onBeforeUnmount(() => {

});

</script>
<style scoped>
::v-deep .el-step__description {
    padding-right: 0px !important;
    font-size: 14px !important;
    color: #333 !important;
    margin-bottom: 24px;
}

::v-deep .el-step__title {
    padding-right: 0px !important;
    font-size: 14px !important;
    color: #333 !important;
    font-weight: inherit !important;
}

::v-deep .el-step__line {
    width: 1px !important;
}

::v-deep .el-pagination__jump {
    margin-left: 0 !important;
}

::v-deep .el-pagination__goto {
    display: none;
}

::v-deep .el-pagination .el-input__inner {
    font-size: 14px !important;
}

::v-deep .el-input__wrapper {
    padding: 0 !important;
}

.main_Box {
    overflow-y: scroll;
    height: 100%;

    &::-webkit-scrollbar {
        display: none;
    }
}

.top_tab {
    width: 100%;
    height: 56px;
    background-color: #fff;
    display: flex;
    align-items: center;
    border-radius: 12px;
    justify-content: space-between;

    .top_flex_back {
        font-size: 16px;
        color: #333;
        cursor: pointer;
        margin-left: 18px;
        /* flex: 1; */
    }
}

.top_entry {
    margin-right: 29px;

    button {
        background-color: #01509f;
        color: #fff;
        width: 108px;
        height: 36px;
        border: 0px solid #eaeaea;
        font-size: 16px;
        border-radius: 6px;
        cursor: pointer;
    }

    span {
        width: 108px;
        height: 36px;
    }

    button:hover {
        transform: scale(1.05) !important;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }
}

.bottom_tab {
    margin-top: 22px;
    width: 100%;
    height: calc(100% - 78px);
    display: flex;
    justify-content: space-between;

    .right_box::-webkit-scrollbar {
        display: none;
    }

    .right_box {
        width: 246px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 16px;
        overflow-y: scroll;
        position: relative;

        .right_icon {
            width: 113px;
            height: 92px;
            position: absolute;
            right: 8px;
            top: 8px;
        }

        .right_item {
            margin-bottom: 25px;

            .right_name {
                font-size: 14px;
                color: #999;
                margin-bottom: 10px;
            }

            .right_value1 {
                font-size: 16px;
                color: #333;
            }

            .right_value2 {
                font-size: 16px;
                color: #333;

                .right_value2_item {
                    margin-bottom: 10px;
                }
            }
        }
    }

    .middle_box {
        width: 756px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
    }

    .scroll-container {
        height: 100%;
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 6px;
        position: relative;
    }

    .scroll-container::-webkit-scrollbar {
        display: none;
    }

    /* 单页容器样式 */
    .page-container {
        width: 100%;
        display: flex;
        justify-content: center;
        position: relative;
        /* 相邻页之间添加分隔线 */
        border-bottom: 1px solid #e0e0e0;
    }

    /* 文档图片样式 */
    .document-img {
        max-width: 100%;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        border-radius: 4px;
    }

    .left_box {
        width: 246px;
        height: 100%;
        background-color: #fff;
        box-sizing: border-box;
        border-radius: 12px;
        padding: 16px;

        .left_area {
            margin-bottom: 32px;

            .area_name {
                color: #01509f;
                font-size: 18px;
                font-weight: bolder;
                margin-bottom: 5px;
                width: 100%;
                border-bottom: 1px solid #eaeaea;
                padding-bottom: 16px;
            }

            .area_file {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                .area_img {
                    width: 152px;
                    height: 320px;
                }
            }
        }
    }
}
</style>